import React, { Component } from 'react'

import {
    View
} from 'react-native'

import { Label, ScaleSlider } from 'iftide'


class Basic2 extends Component {
    constructor(props) {
        super(props)
        this.state = {
            value: '20%',
            defaultValue: 20,
            min: 0,
            max: 100,
            unitAmount: 5,
            unitWidth: 50,
            longScaleColor: 'red',
            shortScaleColor: '#000',
            unitStep: 2,
            oddEven: 'normal',
            forMat: '%'
        }
    }

    render() {
        return (
            <View>
                <Label style={{ marginBottom: 10 }} text={'通用刻度尺-百分比'} color={'black'}></Label>
                <Label text={`${this.state.value}`}></Label>
                <ScaleSlider
                    {...this.state}
                    endBack={this.back.bind(this)}
                />
                <View style={{ height: 1, backgroundColor: '#000', marginBottom: 10 }}>

                </View>
            </View>
        )
    }
    back(e) {
        console.log(e, 'e')
        this.setState({
            value: e.value
        })

    }
}

export default Basic2